<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY='false' />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<!--<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		<!-- 日期选择框start -->
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		<!-- 日期选择框end -->
		<!--圆环-->
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
		<!--数据表格start-->
		<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
		<!--数据表格end-->
				
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTabModern.js"></script>
		<!--基本选项卡end-->
		
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
		<!--基本选项卡end-->
		
		<style type="text/css">
			body {
				background: #F2F3F7;
			}
			#holder {
                position: relative;
                width: 150px;
                height: 150px;
            }
            .l-panel-pagebar{
				padding-bottom: 40px;
			}
		</style>
	</head>

	<body>
		<div class="page_content">
			<div class="basicTabModern">
				<div name="消费概要" style="width:100%;">
					<div class="tab_time">
						<div class="basicTab">
							<div name="今天" style="width:100%;"></div>
							<div name="本月" style="width:100%;"></div>
							<div name="上月" style="width:100%;"></div>
							<div name="最近三月" style="width:100%;"></div>
						</div>
					</div>
					
					<div class="table_win">
						<div class="tab_content3">
							<div class="content_1">
								<span>会员消费</span>
								<div class="ring">
									<div id="holder"></div>
									<div class="text">
										<p><span>86</span>%</p>
										<p>会员消费金额</p>
									</div>
								</div>
								<ul>
									<li>
										<span>93</span>
										<p>总消费金额</p>
									</li>
									<li><b></b></li>
									<li>
										<span>93</span>
										<p>总消费金额</p>
									</li>
									<li><b></b></li>
									<li>
										<span>3</span>
										<p>总消费笔数</p>
									</li>
									<li><b></b></li>
									<li>
										<span>483</span>
										<p>日均消费额</p>
									</li>
									<li><b></b></li>
									<li>
										<span style="color: #E84F41;">205</span>
										<p>日均毛利润</p>
									</li>
									<div class="clear"></div>
								</ul>
							</div>
							<div class="content_1" style="margin: 0;">
								<span style="background: #8CC34B;">散户消费</span>
								<div class="ring">
									<div id="holder1"></div>
									<div class="text">
										<p><span>86</span>%</p>
										<p>会员消费金额</p>
									</div>
								</div>
								<ul>
									<li>
										<span>93</span>
										<p>总消费金额</p>
									</li>
									<li><b></b></li>
									<li>
										<span>93</span>
										<p>总消费金额</p>
									</li>
									<li><b></b></li>
									<li>
										<span>3</span>
										<p>总消费笔数</p>
									</li>
									<li><b></b></li>
									<li>
										<span>483</span>
										<p>日均消费额</p>
									</li>
									<li><b></b></li>
									<li>
										<span style="color: #8CC34B;">205</span>
										<p>日均毛利润</p>
									</li>
									<div class="clear"></div>
								</ul>
							</div>
							<div class="clear"></div>
								
							
							<div class="content_1">
								<table class="tableStyle" style="width:100%;" mode="list">
								    <tr>
								        <th class="ali02">排名</th><th class="ali02">产品名称</th><th class="ali02">销售金额</th>
								    </tr>
								    <tr>
								        <td class="ali02">1</td><td class="ali02">Quick UI</td><td class="ali02">¥10000</td>
								    </tr>
								    <tr>
								        <td class="ali02">2</td><td class="ali02">Quick UI</td><td class="ali02">¥20000</td>
								    </tr>
								    <tr>
								        <td class="ali02">3</td><td class="ali02">Quick UI</td><td class="ali02">¥30000</td>
								    </tr>
								    <tr>
								        <td class="ali02">4</td><td class="ali02">Quick UI</td><td class="ali02">¥40000</td>
								    </tr>
								    <tr>
								        <td class="ali02">5</td><td class="ali02">Quick UI</td><td class="ali02">¥50000</td>
								    </tr>
								    <tr>
								        <td class="ali02">6</td><td class="ali02">Quick UI</td><td class="ali02">¥60000</td>
								    </tr>
								</table>
							</div>
							<div class="content_1" style="margin: 0;">
								<table class="tableStyle" style="width:100%;" mode="list">
								    <tr>
								        <th class="ali02">排名</th><th class="ali02">产品名称</th><th class="ali02">销售金额</th>
								    </tr>
								    <tr>
								        <td class="ali02">1</td><td class="ali02">Quick UI</td><td class="ali02">¥10000</td>
								    </tr>
								    <tr>
								        <td class="ali02">2</td><td class="ali02">Quick UI</td><td class="ali02">¥20000</td>
								    </tr>
								    <tr>
								        <td class="ali02">3</td><td class="ali02">Quick UI</td><td class="ali02">¥30000</td>
								    </tr>
								    <tr>
								        <td class="ali02">4</td><td class="ali02">Quick UI</td><td class="ali02">¥40000</td>
								    </tr>
								    <tr>
								        <td class="ali02">5</td><td class="ali02">Quick UI</td><td class="ali02">¥50000</td>
								    </tr>
								    <tr>
								        <td class="ali02">6</td><td class="ali02">Quick UI</td><td class="ali02">¥60000</td>
								    </tr>
								</table>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>
				<div name="会员消费" style="width:100%;">
					<div class="tab_time">
						<div class="basicTab">
							<div name="今天" style="width:100%;"></div>
							<div name="本月" style="width:100%;"></div>
							<div name="上月" style="width:100%;"></div>
							<div name="最近三月" style="width:100%;"></div>
						</div>
					</div>
					<div class="table_win">
						<div class="tab_content">
							<div class="top">
								<div class="title">
									<span>从2016/03/04注册 * * * * 起</span>
									<div class="clear"></div>
								</div>
								<div class="icon_flat_rect">
								    <ul>
								        <li>
								            <img src="../../libs/icons/icon_flat/icon_img08.png" />
								            <div class="text">
								                <p>今日销售</p>
								                <p><span>¥ 1250</span></p>
								            </div>
								        </li>
								        <li style="background: #7CC422;">
								            <img src="../../libs/icons/icon_flat/icon_img09.png" />
								            <div class="text">
								                <p>本月销售</p>
								                <p><span>¥ 201250</span></p>
								            </div>
								        </li>
								        <li style="background: #FFA060;">
								            <img src="../../libs/icons/icon_flat/icon_img10.png" />
								            <div class="text">
								                <p>会员总数</p>
								                <p><span>3</span>个</p>
								            </div>
								        </li>
								        
								        <div class="clear"></div>
								    </ul>
								</div>
							</div>
							<div class="bottom">
								<div class="title">
									<p>选择日期：
										<input type="text" id="beginTime" class="date" />
										<input type="text" id="endTime" class="date" />
										<button type="button" class="primary button"><span class="icon_find">查询</span></button>
									</p>
								</div>
								<div class="title">
									<span>
										<input type="radio" id="radio" name="radio" value="会员消费" checked="checked" /><label for="radio" class="hand">会员消费</label>
										<input type="radio" id="radio1" name="radio" value="会员" /><label for="radio1" class="hand">会员</label>
									</span>
									<div style="float: right;">
										共发送1条消息，激活0个回头客，产生消费0元
									</div>
									<div class="clear"></div>
								</div>
								<div id="container" style="width: 98%; height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>
				<div name="会员分析" style="width:100%;">
					暂未开通
				</div>
			</div>
		</div>
		<script>
			var radius = 60;
		    var paramBg = {stroke: "#ebf1f7", "stroke-width": 8};
		    var paramRed = {stroke: "#E84F41", "stroke-width": 8,"stroke-linecap":"round"};
		    var paramGreen = {stroke: "#8CC34B", "stroke-width": 8,"stroke-linecap":"round"};
			$(function() {
				var paper =initPaper("holder", 150, 150);
		        //paper,current,min,max,cx,cy,radius,param,paramBg
		        drawRingProgress(paper,23,0,30,75,75,radius,paramRed,paramBg);
		        
		        var paper1 =initPaper("holder1", 150, 150);
		        //paper,current,min,max,cx,cy,radius,param,paramBg
		        drawRingProgress(paper1,23,0,30,75,75,radius,paramGreen,paramBg);
				$('#container').highcharts({
					chart: {
						zoomType: 'xy'
					},
					title: {
						text: '销售概览',
						style: {
							color: '#03A9F5'
						}
					},
					subtitle: {
						text:""
					},
					xAxis: [{
						categories: ['2016/03/07', '2016/03/11', '2016/03/15', '2016/03/19', '2016/03/23', '2016/03/27', '2016/03/31', '2016/04/04', '2016/04/07', '2016/04/12', '2016/04/17', '2016/04/22']
					}],
					yAxis: [ {
						title: {
							text: '',
							style: {
								color: ' '
							}
						},
						labels: {
							format: '{value}',
							style: {
								color: ''
							}
						},
						opposite: false
					}],
					tooltip: {
						shared: true
					},
					legend: {
						layout: 'vertical',
						align: 'left',
						x: 120,
						verticalAlign: 'bottom',
						y: 100,
						floating: true,
						backgroundColor: '#FFFFFF'
					},
					series: [ {
						name: '销售',
						type: 'line',
						data: [440, 490, 495, 345, 382, 415, 592, 565, 633, 683, 639, 720],
						color: '#7BC623'
					}]
				});
			});
			function itemclick(item, i){
	            top.Toast("showNoticeToast", "菜单项："+item.text+"，点击行："+userName);
	        }
			var fixedObj=120;
			function customHeightSet(contentHeight,contentWidth){
			    $(".table_win").height(contentHeight-fixedObj);
			}
		</script>
	</body>

</html>